<template>
  <div>
    <div class="position-relative text-white">
      <div class="w-full h-800px">
        <v-parallax height="100%" src="@/assets/images/home-bg.png"></v-parallax>
      </div>
      <div class="position-absolute inset-0 flex align-center justify-center">
        <div class="flex align-center max-w-1200px">
          <div class="flex flex-col justify-space-between align-start">
            <div class="left-in-1 text-56px font-light	no tracking-5px leading-70px mb-15px">用鲸喜多多的力量<br>让商家生意更好做
            </div>
            <div class="left-in-2 text-32px font-light text-white leading-61px tracking-5px mb-30px">吃喝玩乐购
              联盟生态圈
            </div>
            <img src="@/assets/images/home-img2.png" alt="" class="mb-50px fade-in">
            <div class="btn-scale flex flex-col align-center">
              <v-btn
                  class="!rounded-full mb-10px"
                  color="#EE5F2E"
                  height="65px"
                  width="200px"
                  @click="$router.push({name:'apply'})"
                  variant="flat">
                <span class="text-24px">免费入驻</span>
              </v-btn>
            </div>
            <div class="bottom-in">或致电咨询：400-1767-828</div>
          </div>
          <div class="ml-150px bottom-fade-in-2">
            <img src="@/assets/images/home-img1.png" class="w-460px select-none	h-430px" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="h-60px bg-hex-FFF3E7 flex justify-center">
      <v-container>
        <div class="px-50px flex align-center">
          <img src="@/assets/images/bugle.png" class="w-20px h-20px mr-20px" alt="">
          <div class="text-hex-B27E57 text-14px">鲸喜多多V2.0：解锁新功能，让它们成为您的得力助手！</div>
        </div>
      </v-container>
    </div>
    <v-container>
      <div class="pt-80px"></div>
      <div class="flex items-stretch">
        <div class="flex-1 mr-50px ">
          <div class="text-36px tracking-3px mb-20px bottom-fade-in-2">广东长盈网络科技有限公司</div>
          <div id="companyIntr" class="bottom-fade-in-2 text-hex-8C8C8C leading-36px pr-20px text-20px"></div>
        </div>
        <div class="flex-1">
          <v-responsive :aspect-ratio="16 / 9">
            <v-parallax height="100%" src="@/assets/images/cover.jpg">
              <div class="flex items-center justify-center h-full">
                <img @click="vueData.videoDialog=true" src="@/assets/images/play.png"
                     class="w-50px h-50px cursor-pointer" alt="">
              </div>
            </v-parallax>
          </v-responsive>
        </div>
        <v-dialog v-model="vueData.videoDialog" width="auto">
          <v-responsive :aspect-ratio="16 / 9" class="h-500px">
            <video src="https://hdjx654321-1316621993.cos.ap-guangzhou.myqcloud.com/jieshao.mp4" autoplay
                   class="w-full h-full" controls></video>
          </v-responsive>
        </v-dialog>
      </div>
      <div class="pt-140px pb-90px flex items-stretch bottom-fade-in-2">
        <v-row class="flex-nowrap" dense>
          <v-col v-for="(item,index) in vueData.cardList" :key="index">
            <v-card
                @click="vueData.cardCurrent=index"
                variant="elevated"
                elevation="0"
                :color="vueData.cardCurrent===index?'#FF7752':''"
                class="h-350px !rounded-17px flex-col flex items-center p-20px">
              <template v-slot:title>
                <div class="flex-col flex items-center">
                  <div class="w-80px h-80px rounded-full box-border my-20px">
                    <v-img width="100%" aspect-ratio="1/1" cover :src="item.icon"></v-img>
                  </div>
                  <div class="text-26px leading-30px mb-10px">{{ item.title }}</div>
                </div>
              </template>
              <template v-slot:text>
                <div class="text-17px leading-27px">
                  {{ item.detail }}
                </div>
              </template>
            </v-card>
          </v-col>
        </v-row>
      </div>
    </v-container>
    <v-container>
      <div class="pt-46px pb-60px text-center mb-20px tracking-3px">
        <div class="text-36px mb-30px">鲸喜多多 助力行业长期经营&跨界增收</div>
        <div class="text-18px text-hex-96999C">联盟本地生活吃/喝/玩/乐/购 未来你会成为他们</div>
      </div>
      <div class="flex items-center justify-around mb-10px">
        <div>
          <div class="text-26px mb-10px">10000+商家入驻</div>
          <div class="text-hex-96999C text-18px">吃喝玩乐购</div>
        </div>
        <div>
          <div class="text-26px mb-10px">1亿+产品收录</div>
          <div class="text-hex-96999C text-18px">助力商家提高收益</div>
        </div>
        <div>
          <div class="text-26px mb-10px">100+覆盖行业</div>
          <div class="text-hex-96999C text-18px">各行商家跨界联盟</div>
        </div>
      </div>
      <v-img src="@/assets/images/card1.png" height="540" cover class="rounded-10px bottom-fade-in"></v-img>
      <div class="flex flex-col items-center py-26px">
        <v-btn
            class="!rounded-10px mb-10px btn-scale"
            color="#EE5F2E"
            height="65px"
            variant="flat">
          <span class="text-24px">免费获取完整案例资料</span>
        </v-btn>
        <div class="text-16px text-hex-9F9FA0">或致电咨询：400-1767-828</div>
      </div>
    </v-container>
    <v-container class="!pb-180px">
      <div class="pt-110px pb-170px flex flex-col items-center tracking-3px">
        <div class="text-36px mb-30px">鲸喜多多将带给你全新的订单增长体验</div>
        <div class="text-hex-96999C text-18px">全方位助您店铺降本增效</div>
      </div>
      <div class="flex items-stretch">
        <div class="flex-1 mr-80px tracking-3px flex flex-col items-start justify-between">
          <div class="left-in-1">
            <div class="text-36px mb-10px leading-38px">商家专属收款码</div>
            <div class="text-36px leading-38px">无痕锁客 解决锁客难问题</div>
          </div>
          <div class="left-in-2 text-20px text-hex-96999C leading-30px">
            商家入驻后，可生成专属收款码，通过收款码可以无痕锁定新客户，通过微信扫码支付锁定这些人群到你的私域流量里
          </div>
          <v-btn
              class="!rounded-10px btn-scale"
              color="#EE5F2E"
              height="50px"
              variant="flat">
            <span class="text-20px">免费体验鲸喜多多私域商城</span>
          </v-btn>
        </div>
        <v-img src="@/assets/images/card2.png" class="right-distance" height="300"></v-img>
      </div>
    </v-container>
    <v-container class="!py-100px flex items-stretch">
      <div class="flex-1 mr-130px">
        <v-img src="@/assets/images/card3.png" content="" class="left-in-1 rounded-10px"></v-img>
      </div>
      <div class="flex-1 py-40px tracking-3px flex flex-col items-start justify-between">
        <div class="right-distance">
          <div class="text-36px mb-10px leading-38px">多种营销玩法</div>
          <div class="text-36px leading-38px">高价值积分加持 吸引客户“留下来”</div>
        </div>
        <div class="right-distance text-20px text-hex-96999C leading-30px">
          商家使用后台营销系统，推出套餐、秒杀等优惠等活动。平台提供高价值积分可到店消费抵扣，这样一来，往往就能吸引一大批顾客进店消费，从而将客户“留下来”。
        </div>
        <v-btn
            class="!rounded-10px btn-scale"
            color="#EE5F2E"
            height="50px"
            variant="flat">
          <span class="text-20px">免费试用营销玩法</span>
        </v-btn>
      </div>
    </v-container>
    <v-container class="!py-100px flex items-stretch">
      <div class="flex-1 py-40px tracking-3px flex flex-col items-start justify-between">
        <div class="left-in-1">
          <div class="text-36px mb-10px leading-38px">共享庞大商圈市场</div>
          <div class="text-36px leading-38px">加速复购拉新 解决拓客难问题</div>
        </div>
        <div class="left-in-1 text-20px text-hex-96999C leading-30px">
          商家间是异业联盟的合作方式，资源共享、会员共享，凭借着庞大的商圈，来聚集更多客源，借此来创造出多方共赢的市场利益。
        </div>
        <v-btn
            class="!rounded-10px btn-scale"
            color="#EE5F2E"
            height="50px"
            variant="flat">
          <span class="text-20px">免费入驻鲸喜多多平台</span>
        </v-btn>
      </div>
      <div class="flex-1 mr-20px">
        <v-img src="@/assets/images/card4.png" class="right-distance rounded-10px"></v-img>
      </div>
    </v-container>
    <v-container class="!py-100px flex items-center">
      <div class="flex-1 mr-130px">
        <v-img src="@/assets/images/card5.png" class="left-in-1 rounded-10px"></v-img>
      </div>
      <div class="flex-1 tracking-3px flex flex-col items-start justify-between">
        <div class="right-in-1 mb-50px">
          <div class="text-36px mb-10px leading-38px">附近商家 精准推荐</div>
          <div class="text-36px leading-38px">销售增长能力 解决引流难问题</div>
        </div>
        <div class="right-in-2 mb-50px text-20px text-hex-96999C leading-30px">
          鲸喜多多“附近商家”基于位置精准推荐商家信息，增加了商家的曝光率和知名度，可以让实体店商品和活动优惠直接展示在附近范围内的用户面前，线上下单，到店核销，从而打破静等客户上门的尴尬。
        </div>
        <v-btn
            class="!rounded-10px btn-scale"
            color="#EE5F2E"
            height="50px"
            variant="flat">
          <span class="text-20px">免费试用营销玩法</span>
        </v-btn>
      </div>
    </v-container>
    <v-container class="!py-100px flex items-center">
      <div class="flex-1 py-40px mr-60px tracking-3px flex flex-col items-start justify-between">
        <div class="mb-50px left-in-1">
          <div class="text-36px mb-10px leading-38px">跨界增收 共享粉丝消费佣金</div>
          <div class="text-36px leading-38px">人人都是你的推广员</div>
        </div>
        <div class="left-in-2 mb-50px text-20px text-hex-96999C leading-30px">
          所有联盟商家共享粉丝消费收益，完善的分佣模式帮助商家快速获取更多跨界收益。店员推广还可享额外收益，提高工作积极性
        </div>
        <v-btn
            class="!rounded-10px btn-scale"
            color="#EE5F2E"
            height="50px"
            variant="flat">
          <span class="text-20px">免费入驻鲸喜多多平台</span>
        </v-btn>
      </div>
      <div class="flex-1">
        <v-img src="@/assets/images/card6.png" aspect-ratio="1/1" class="right-in-1 rounded-10px h-470px"></v-img>
      </div>
    </v-container>
    <v-container class="!pb-100px">
      <div class="pt-110px btn-scale pb-90px flex flex-col items-center tracking-3px">
        <div class="text-36px mb-30px">口碑证明实力，带动更多商家共同发展</div>
        <div class="text-hex-96999C text-18px">我们期待您的加入</div>
      </div>
      <v-img src="@/assets/images/card7.png" class="bottom-fade-in-2" height="480"></v-img>
    </v-container>
<!--    <v-container class="!pb-100px !pt-60px flex items-start">
      <div class="flex-1 overflow-hidden mr-40px">
        <div
            class="pb-20px  mb-10px border-0px border-b-2px border-solid border-hex-999898 flex items-center justify-between">
          <div class="text-26px">行业动态</div>
          <div class="text-18px">more+</div>
        </div>
        <div v-for="(item,index) in 3" :key="index" class="py-10px flex items-stretch justify-between">
          <div class="w-120px h-70px mr-10px">
            <v-img src="@/assets/test/01.png" width="100%" height="100%"></v-img>
          </div>
          <div class="flex-1 overflow-hidden">
            <div class="text-16px truncate font-medium mb-10px">
              鲸喜多多参与《预见独角兽》节目鲸喜多多参与《预见独角兽》节目
            </div>
            <div class="text-hex-96999C text-12px leading-15px ellipsis-3">
              目前，鲸喜多多参与《预见独角兽》节目目前， 鲸喜多多参与《预见独角兽》节目鲸喜多多参与《预见独角兽》节目
              鲸喜多多参与《预见独角兽》节目鲸喜多多参与《预见独角兽》节目
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 overflow-hidden mr-40px">
        <div
            class="pb-20px  mb-10px border-0px border-b-2px border-solid border-hex-999898 flex items-center justify-between">
          <div class="text-26px">版本动态</div>
          <div class="text-18px">more+</div>
        </div>
        <div v-for="(item,index) in 3" :key="index" class="py-10px flex items-stretch justify-between">
          <div class="flex-1 overflow-hidden">
            <div class="text-16px truncate font-medium mb-10px">
              鲸喜多多参与《预见独角兽》节目鲸喜多多参与《预见独角兽》节目
            </div>
            <div class="text-hex-96999C text-12px leading-15px ellipsis-3">
              目前，鲸喜多多参与《预见独角兽》节目目前，鲸喜多多参与《预见独 角兽》节目…
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 overflow-hidden">
        <div
            class="pb-20px  mb-10px border-0px border-b-2px border-solid border-hex-999898 flex items-center justify-between">
          <div class="text-26px">帮助中心</div>
          <div class="text-18px">more+</div>
        </div>
        <div v-for="(item,index) in 3" :key="index" class="py-10px flex items-stretch justify-between">
          <div class="flex-1 overflow-hidden">
            <div class="text-16px truncate font-medium mb-10px">鲸喜多多商家操作指南</div>
            <div class="text-hex-96999C text-12px leading-15px ellipsis-3">
              鲸喜多多商家操作指南
            </div>
          </div>
        </div>
      </div>
    </v-container>-->
    <v-container class="!pb-80px !pt-20px">
      <div class="flex flex-col items-center tracking-3px">
        <div class="text-36px mb-30px">马上入驻鲸喜多多平台，见证订单全新增长</div>
        <div class="text-hex-96999C text-18px">现在入驻，可享受1200元商家礼包</div>
        <v-btn
            class="!rounded-10px mt-70px btn-scale"
            color="#EE5F2E"
            width="280px"
            height="52px"
            @click="$router.push({name:'apply'})"
            variant="flat">
          <span class="text-20px">申请入驻</span>
        </v-btn>
      </div>
    </v-container>
  </div>
</template>

<script lang="ts" setup>
import {reactive} from "vue";
import icon1 from '@/assets/images/card-icon1.png'
import icon2 from '@/assets/images/card-icon2.png'
import icon3 from '@/assets/images/card-icon3.png'
import icon4 from '@/assets/images/card-icon4.png'
import icon5 from '@/assets/images/card-icon5.png'
import Typed from 'typed.js'
import ScrollReveal from 'scrollreveal'
import {onMounted} from "vue";
import {exeAnimat} from "@/utils";

onMounted(() => {
  exeAnimat()
  ScrollReveal().reveal('#companyIntr', {
    afterReveal: () => {
      new Typed('#companyIntr', {
        strings: ['成立于制造业名城 东莞，注册资本1千万；是在国家大力鼓励消费的政策背景下成立的一家促进经济消费的线上线下共享综合商圈平台，通过鲸喜多多平台生态系统、供应链、互联网数字化管理和连锁门店升级改造，整合吃喝玩乐购优质资源，赋能实体商家，带动大众创业，让商家降低营销成本，提高客流、复购率及营业额，让用户做到消费省钱、消费增值。'],
        typeSpeed: 50,
        cursorChar: ''
      });
    }
  });
})
const vueData = reactive({
  videoDialog: false,
  cardCurrent: 0,
  cardList: [
    {
      icon: icon1,
      title: '全新商业模式',
      detail: '融合本地生活服务、商 城、支付、会员、积分、抵扣券、红包等优质功 能，打造吃喝玩乐购联盟生态系统',
    },
    {
      icon: icon2,
      title: '管理系统',
      detail: '专业商家后台管理，会员信息、经营数据、跨界收益一目了然',
    },
    {
      icon: icon3,
      title: '供应链',
      detail: '自有供应链体系，有上万款商品正常供应及价格优势',
    },
    {
      icon: icon4,
      title: '专业团队',
      detail: '专业技术研发团队，软件著作权、ICP备案，系统迭代',
    },
    {
      icon: icon5,
      title: '资金保障',
      detail: '合作第三方上市支付公 司，所有资金流水受银监会监管，保证资金安全，杜绝二清风险',
    },
  ]
})
</script>


